<template>
	<common-layout>
		<div class="top">
			<div class="header">
				<img alt="logo" class="logo" src="@/assets/img/logo.png" />
				<span class="title">都来租推广平台</span>
			</div>

		</div>
		<div class="login">
			<a-form @submit="onSubmit" :form="form">
				<a-tabs size="large" :tabBarStyle="{textAlign: 'center'}" style="padding: 0 2px;" @change="callback">
					<a-tab-pane v-if="!forgetShow" tab="账户登录" key="1">
						<a-alert type="error" :closable="true" v-show="error" :message="error" showIcon
							style="margin-bottom: 24px;" />
						<a-form-item label="账户">
							<a-input autocomplete="autocomplete" size="large" placeholder="手机号"
								v-decorator="['name', {rules: [{ required: true, message: '请输入账户名', whitespace: true}]}]">
								<a-icon slot="prefix" type="user" />
							</a-input>
						</a-form-item>
						<a-form-item label="密码">
							<a-input size="large" placeholder="请输入密码" autocomplete="autocomplete" type="password"
								v-decorator="['password', {rules: [{ required: true, message: '请输入密码', whitespace: true}]}]">
								<a-icon slot="prefix" type="lock" />
							</a-input>
						</a-form-item>
					</a-tab-pane>
					<a-tab-pane v-if="!forgetShow" tab="注册账号" key="2">
						<el-form label-position="right" :rules="rules1" label-width="120px" ref="formRe"
							:model="formRe">
							<el-form-item label="推广类型">
								<el-radio-group v-model="formRe.user_type" size="small" @change="changeType">
									<el-radio-button :label="2">个人</el-radio-button>
									<el-radio-button :label="1">企业</el-radio-button>
								</el-radio-group>
							</el-form-item>
							<el-form-item label="手机号" prop="contact_tel" label-width="120px">
								<el-input v-model="formRe.contact_tel" placeholder="请输入手机号"></el-input>
							</el-form-item>
							<el-form-item label-width="120px" prop="regustCode" label="验证码">
								<el-input v-model="formRe.regustCode" placeholder="请输入验证码"></el-input>
								<span v-show="isShow" style="color: #17a2ff;">*没收到验证码?重新发送</span>
								<el-button class="sendCode" :disabled="isSend" @click="handlebtn" type="primary">
									{{codeName}}
								</el-button>
							</el-form-item>
							<el-form-item label-width="120px" prop="people" label="联系人姓名">
								<el-input v-model="formRe.people" placeholder="请输入联系人姓名"></el-input>
							</el-form-item>
							<el-form-item label-width="120px" label="推广区域城市" v-show="enterpriseStatus">
								<el-input v-model="formRe.area_id" placeholder="请输入推广区域城市"></el-input>
							</el-form-item>
							<el-form-item label-width="120px" label="公司地址" v-show="enterpriseStatus">
								<el-input v-model="formRe.address" placeholder="请输入公司地址"></el-input>
							</el-form-item>
							<el-form-item label-width="120px" label="统一社会信用代码" prop="companyid" v-if="enterpriseStatus">
								<el-input v-model="formRe.companyid" placeholder="请输入统一社会信用代码" :validate-event="enterpriseStatus"></el-input>
							</el-form-item>
							<el-form-item label-width="120px" label="公司/机构名称" prop="mechanism" v-if="enterpriseStatus">
								<el-input v-model="formRe.mechanism" placeholder="请输入公司/机构名称" :validate-event="enterpriseStatus"></el-input>
							</el-form-item>
							<el-form-item label-width="120px" label="身份证姓名" prop="faname">
								<el-input v-model="formRe.faname" prop="contact_tel" placeholder="请输入身份证姓名"></el-input>
							</el-form-item>
							<el-form-item label-width="120px" prop="idcard" label="身份证号">
								<el-input v-model="formRe.idcard" placeholder="请输入身份证号"></el-input>
							</el-form-item>
							<el-form-item label-width="120px" label="经营区域" v-show="enterpriseStatus">
								<el-input v-model="formRe.shopcity" placeholder="请输入经营区域"></el-input>
							</el-form-item>
							<el-form-item label-width="120px" prop="email" label="邮箱">
								<el-input v-model="formRe.email" placeholder="请输入邮箱"></el-input>
							</el-form-item>
							<el-form-item label-width="120px" prop="code" label="邀请码">
								<el-input v-model="formRe.code" placeholder="请输入邀请码"></el-input>
							</el-form-item>
						</el-form>
					</a-tab-pane>
					<a-tab-pane v-if="forgetShow" tab="忘记密码" key='3'>
						<el-form label-position="right" status-icon :rules="rules2" label-width="80px" ref="formForget"
							:model="formForget">
							<el-form-item label="手机号" prop="contact_tel">
								<el-input v-model="formForget.contact_tel" placeholder="请输入手机号"></el-input>
							</el-form-item>
							<el-form-item label="验证码" prop="regustCode">
								<el-input v-model="formForget.regustCode" placeholder="请输入验证码"></el-input>
								<span v-show="isShow1" style="color: #17a2ff;">*没收到验证码?重新发送</span>
								<el-button class="sendCode1" :disabled="isSend1" @click="handleForget" type="primary">
									{{codeName1}}
								</el-button>
							</el-form-item>
							<el-form-item label="密码" prop="password">
								<el-input v-model="formForget.password" placeholder="请输入新登陆密码" show-password
									autocomplete="new-password" />
							</el-form-item>
							<el-form-item label="确认密码" prop="confirmPwd">
								<el-input v-model="formForget.confirmPwd" placeholder="请确认新登陆密码" show-password
									autocomplete="new-password" />
							</el-form-item>
						</el-form>
					</a-tab-pane>
				</a-tabs>

				<a-form-item>
					<a-button :loading="logging" style="width: 100%;margin-top: 24px" size="large" htmlType="submit"
						type="primary">{{keys==1?'登录':keys==2?'注册':'确认'}}</a-button>
					<a-button v-show="keys==3?true:false" @click="returnBack"
						style="width: 100%;margin-top: 24px;background-color: #f0f2f5;border:0;color: #000" size="large"
						>返回登录</a-button>
				</a-form-item>
			</a-form>
			<div>
				<el-button v-show="keys==1?true:false" style="float: right;background-color: #f0f2f5; border: 0;"
					@click="toForget">忘记密码 </el-button>
			</div>
		</div>
	</common-layout>
</template>

<script>
	import CommonLayout from '@/layouts/CommonLayout'

	import {
		setAuthorization
	} from '@/utils/request'
	import {
		loadRoutes
	} from '@/utils/routerUtil'
	import {
		mapMutations
	} from 'vuex'
	import {
		login,
		addUser,
		getAuthRule,
		forgetPwd,
		sendMobileCode
	} from '@/api/login'
	export default {
		name: 'Login',
		components: {
			CommonLayout,
			// cropUpload
		},
		data() {
			let validateTel = (rule, value, callback) => {
				if (value && value != "") {
					if (
						!/^1[0-9]{10}$/.test(
							value
						)
					) {
						callback(new Error("请输入正确的手机号码"));
					} else {
						callback();
					}
				} else {
					callback();
				}
			}
			var validateConfirm = (rule, value, callback) => {
				if (value !== this.formForget.password) {
					callback(new Error('两次输入密码不同！'))
				} else {
					callback()
				}
			}
			var validatePwd = (rule, value, callback) => {
				let reg = /^[^\u4e00-\u9fa5]{0,}$/;
				if (value.length < 6) {
					callback(new Error('密码必须大于等于6个字符'))
				} else if (!reg.test(value)) {
					callback(new Error('密码不能包含汉字！'))
				} else {
					callback()
				}
			}
			return {
				logging: false,
				send: true,
				reSend: false,
				forgetShow: false,
				isShow: false,
				isShow1: false,
				isSend: false, //禁用
				codeName: "发送验证码",
				totalTime: 60,
				timer: '', //定时器
				isSend1: false, //禁用
				codeName1: "发送验证码",
				totalTime1: 60,
				timer1: '', //定时器
				error: '',
				form: this.$form.createForm(this),
				keys: 1,
				formRe: {
					contact_tel: '',
					regustCode: '',
					type: '',
					user_type: 2,
					area_id: '',
					address: '',
					companyid: '',
					mechanism: '',
					faname: '',
					idcard: '',
					faidcard: '',
					faidcard_back: '',
					shopcity: '',
					email: '',
					code: '',
					people: ''
				},
				formForget: {
					contact_tel: '',
					regustCode: '',
					password: '',
					confirmPwd: '',
				},
				user_type: '2',
				enterpriseStatus: false,
				rules1: {
					contact_tel: [{
						required: true,
						validator: validateTel,
						trigger: 'blur'
					}],
					regustCode: [{
						required: true,
						message: '验证码不能为空',
						trigger: 'blur'
					}],
					people: [{
						required: true,
						message: '联系人姓名不能为空',
						trigger: 'blur'
					}, ],
					faname: [{
						required: true,
						message: '身份证名字不能为空',
						trigger: 'blur'
					}, ],
					idcard: [{
						required: true,
						message: '身份证号码不能为空',
						trigger: 'blur'
					}],
					faidcard: [{
						required: true,
						message: '身份证正面照片不能为空',
						trigger: 'blur'
					}],
					faidcard_back: [{
						required: true,
						message: '身份证反面照片不能为空',
						trigger: 'blur'
					}],
					email: [{
						required: true,
						message: '邮箱不能为空',
						trigger: 'blur'
					}],
					companyid: [{
						required: true,
						message: '统一社会信用代码不能为空',
						trigger: 'blur'
					}],
					mechanism: [{
						required: true,
						message: '公司名称不能为空',
						trigger: 'blur'
					}],
					code: [{
						required: true,
						message: '邀请码不能为空',
						trigger: 'blur'
					}],
				},
				rules2: {
					contact_tel: [{
						required: true,
						validator: validateTel,
						trigger: 'blur'
					}],
					regustCode: [{
						required: true,
						message: '验证码不能为空',
						trigger: 'blur'
					}],
					password: [{
							required: true,
							message: '密码不能为空',
							trigger: 'blur'
						},
						{
							validator: validatePwd,
							trigger: 'blur'
						}
					],
					confirmPwd: [{
							required: true,
							message: '确认密码不能为空',
							trigger: 'blur'
						},
						{
							validator: validateConfirm,
							trigger: 'blur'
						}
					],
				},
			}
		},
		computed: {
			systemName() {
				return this.$store.state.setting.systemName
			}
		},
		mounted() {
			// this.time()
		},
		methods: {
			...mapMutations('account', ['setUser', 'setPermissions', 'setRoles', 'setToken', 'setPerSale']),
			toForget() {
				this.keys = 3
				this.forgetShow = true
			},
			returnBack() {
				this.keys = 1
				this.forgetShow = false
			},
			onSubmit(e) {
				e.preventDefault()
				if (this.keys == 1) {
					this.form.validateFields((err) => {
						if (!err) {
							// this.logging = true
							const name = this.form.getFieldValue('name')
							const password = this.form.getFieldValue('password')
							// login(name, password).then(this.afterLogin)

							login({
								mobile: name,
								password: password,
							}).then(this.afterLogin)
						}
					})
				} else if (this.keys == 3) {
					this.$refs.formForget.validate((valid) => {
						if (valid) {
							// this.logging = true
							const params = this.formForget
							console.log(this.formForget);
							forgetPwd(params).then(res => {
								this.$message({
									type: 'success',
									message: '操作成功'
								})
							})
						}
					})
					// console.log(this.keys);
				} else {
					this.$refs.formRe.validate((valid) => {
						if (valid) {
							// this.logging = true
							const params = this.formRe
							// login(name, password).then(this.afterLogin)
							addUser(params).then(res => {
								if (res.status == 100) {
									this.$message({
										type: 'error',
										message: res.message
									})
									return
								}else{
									this.setUser(res.token)
									this.$message({
										type: 'success',
										message: '注册成功，正在审核！'
									})
									setTimeout(() => {
										location.reload()
									}, 2000)
								}
								
							})
							
						}
					})
				}
			},
			callback(key) {
				this.keys = key
				// console.log(key);
			},
			afterLogin(res) {
				console.log("after",res);
				this.logging = false
				const user = {
					address: "深圳市",
					avatar: "https://gw.alipayobjects.com/zos/rmsportal/gaOngJwsRYRaVAuXXcmB.png",
					name: res.username
				}
				const permissions = [{
					id: "queryForm",
					operation: ['add', 'edit']

				}]
				const roles = [{
					id: "queryForm",
					operation: ['add', 'edit', 'delete']

				}]
				const message = '欢迎回来'
				window.localStorage.setItem("token", res.token);
				this.setUser(user)
				this.setPermissions(permissions)
				this.setRoles(roles)
				this.setPerSale(res.sale_user_id)
				setAuthorization({
					token: res.token,
					expireAt: new Date(res.expireAt)
				})
				localStorage.removeItem('routesConfig')
				// 获取路由配置
				getAuthRule().then(result => {
					let obj = {
						router: result.router,
						children: result.children
					}
					// console.log(obj);
					window.localStorage.setItem("routesConfig", JSON.stringify(obj));
					const routesConfig = result
					loadRoutes(routesConfig)
					this.$router.push('/extension/personal')
					this.$message.success(message, 3)
					// window.location.reload()
				})
				// } else {
				// 	this.error = '111'
				// }
			},
			changeType(val) {
				this.formRe.user_type = val
				// console.log(val);
				if (val === 1) {
					this.enterpriseStatus = true
				} else {
					this.enterpriseStatus = false
				}
			},
			setUrl(key, value) {
				this.formRe[key] = value
			},
			handlebtn() {
				if (this.formRe.contact_tel == '') {
					this.$message({
						type: 'error',
						message: '请输入手机号码'
					})
				} else if (!/^1[0-9]{10}$/.test(this.formRe.contact_tel)) {
					this.$message({
						type: 'error',
						message: '请输入正确的手机号码'
					})
					return
				} else {
					// if (this.isSend) return

					let mobile = this.formRe.contact_tel
					// console.log(mobile);
					sendMobileCode(mobile).then(res => {
						console.log(res);
					})
					// this.getCode() // 获取验证码的接口
					this.isSend = true
					this.isShow = true
					this.isShow1 = true
					this.codeName = this.totalTime + 's后重新发送'
					this.timer = setInterval(() => {
						this.totalTime--
						this.codeName = this.totalTime + 's后重新发送'
						if (this.totalTime < 0) {
							clearInterval(this.timer)
							this.codeName = '重新发送验证码'
							this.totalTime = 10
							this.isSend = false
						}
					}, 1000)
				}
			},
			handleForget() {
				if (this.formForget.contact_tel == '') {
					this.$message({
						type: 'error',
						message: '请输入手机号码'
					})
				} else if (!/^1[0-9]{10}$/.test(this.formForget.contact_tel)) {
					this.$message({
						type: 'error',
						message: '请输入正确的手机号码'
					})
					return
				} else {
					if (this.isSend1) return
					let mobile = this.formForget.contact_tel
					sendMobileCode(mobile).then(res => {
						console.log(res);
					})
					// 获取验证码的接口
					this.isSend1 = true
					this.codeName1 = this.totalTime1 + 's后重新发送'
					this.timer1 = setInterval(() => {
						this.totalTime1--
						this.codeName1 = this.totalTime1 + 's后重新发送'
						if (this.totalTime1 < 0) {
							clearInterval(this.timer1)
							this.codeName1 = '重新发送验证码'
							this.totalTime1 = 10
							this.isSend1 = false
						}
					}, 1000)
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.sendCode {
		position: absolute;
		top: -0px;
		left: 120px;
		width: 130px;
		border-radius: 0px;
	}

	.sendCode1 {
		position: absolute;
		top: -0px;
		left: 150px;
		width: 135px;
		border-radius: 0px;
	}

	.flex {
		display: flex;
	}

	.common-layout {
		.top {
			text-align: center;

			.header {
				height: 44px;
				line-height: 44px;

				a {
					text-decoration: none;
				}

				.logo {
					height: 44px;
					vertical-align: top;
					margin-right: 16px;
				}

				.title {
					font-size: 33px;
					color: @title-color;
					font-family: 'Myriad Pro', 'Helvetica Neue', Arial, Helvetica, sans-serif;
					font-weight: 600;
					position: relative;
					top: 2px;
				}
			}

			.desc {
				font-size: 14px;
				color: @text-color-second;
				margin-top: 12px;
				margin-bottom: 40px;
			}
		}

		.login {
			width: 368px;
			margin: 0 auto;

			@media screen and (max-width: 576px) {
				width: 95%;
			}

			@media screen and (max-width: 320px) {
				.captcha-button {
					font-size: 14px;
				}
			}

			.icon {
				font-size: 24px;
				color: @text-color-second;
				margin-left: 16px;
				vertical-align: middle;
				cursor: pointer;
				transition: color 0.3s;

				&:hover {
					color: @primary-color;
				}
			}
		}
	}
</style>
